import CodeView from "../../../shared/components/CodeView";
import CodeBlock from "../../../shared/components/CodeBlock";
import Example from "../../../shared/components/Example";
import ButtonIcon from "../button-icons/";
import { UtilityIcon } from "../icons/base/example";
import Blockquote from "../../../shared/components/Blockquote";
import { getDisplayElementById } from "../../shared/helpers";
import StylingHooksTable from "../../../shared/components/StylingHooksTable";
import * as Base from "./base/example";

<div className="doc lead">
  Alert banners communicate a state that affects the entire system, not just a
  feature or page. It persists over a session and appears without the user
  initiating the action.
</div>

<CodeView exampleOnly>{getDisplayElementById(Base.default)}</CodeView>

## About Alert

### Accessibility

#### Role

Alert notifications should contain `role="alert"` on the container to signal to assistive technology that they require the user’s immediate attention.

<CodeBlock toggleCode={false}>
  <div className="slds-notify slds-notify_alert" role="alert">
    ...
  </div>
</CodeBlock>

#### Assistive Text

Use a span with the class `slds-assistive-text` to let the user know what type of notification it is.

<CodeBlock toggleCode={false}>
  <span className="slds-assistive-text">Info</span>
</CodeBlock>

## Base

Use the info alert when notifying the user of neutral information about the system.

<CodeView>{getDisplayElementById(Base.default)}</CodeView>

## Variations

### Warning

Use the warning variant to warn the user about important system information that deserves caution.

<CodeView>{getDisplayElementById(Base.states, "warning")}</CodeView>

### Error

Use the error variant when you need to alert the user about an error in the system that needs immediate attention.

<CodeView>{getDisplayElementById(Base.states, "error")}</CodeView>

### Offline

Use the offline alert to let the user know that they are not connected to the internet.

<CodeView>{getDisplayElementById(Base.states, "offline")}</CodeView>

## Styling Hooks Overview

<StylingHooksTable name="alert" type="component" />
